import React, { useState, useMemo, useEffect } from 'react';
import { d_sort, obj_str, useHigh, GridTable, filter_row, useCmd, BtTxt, WaitUmd, MainView, PanelFind, is_empty, loc } from 'sui';
import { reload, fix_col, c_load } from './cfg/cmd';

const SpcCheck = () => {
    const [main, setMain] = useState();
    const [high] = useHigh(140, 100);
    const umd = useCmd(null, "spc");

    /*
    useEffect(() => urlGet(null, c_load, r => {
        if (r.cell) {
            d_sort(r.cell, "sn");
        }

        if (r.station) {
            d_sort(r.station, "sn");
        }

        reload(r, setMain);
    }, e => setMain(null)), []);
    */

    const filterRow = useMemo(() => {
        if (is_empty(main)) {
            return null;
        }

        const flst = ["sn", "name", "ltp"];

        return filter_row(main, flst, umd.filter);
    }, [main, umd.filter]);

    const hopen = (d) => {
        window.open(`/production-spc?sn=${obj_str(d, "sn")}`, "_blank");
    };

    const fix = fix_col();

    const col = [
        {name: loc("db_019"), width: 60, key: 'index'},
        {name: loc("mg_054"), key: 'e_opt', width: 90, export: false, formatter: props => {
            const d = props.row;

            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => hopen(d)}>{loc("zw_151")}</BtTxt>
                </div>
            );
        }},
        ...fix,
    ];

    return (
        <MainView>
            <PanelFind left={loc("zw_150")} hcmd={v => umd.setFilter(v)}/>
            <GridTable col={col} row={filterRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {SpcCheck};
